<table width='100%' cellpadding="0" cellspacing="0" id='stand_list'>
{volist name="list" id="vo" }
   <tr>
     <td class='stand_name'>{$vo.stand_name}</td>
     <td class='stand_list'>
    {foreach $vo.stand_list as $v}
        <label class="rule_id"   {if isset($stand_time)}{foreach $stand_time as $t}{foreach $t as $tt}{if $v==$tt}style='border:1px solid #ff3300;'{/if}{/foreach}{/foreach}{/if}name='{$vo.id}'><input type="checkbox"  name="ruledata_id" value="{$vo.id},{$v}" class="mar5 inputfix" v-model='list.list'>{$v}<i {if isset($stand_time)}{foreach $stand_time as $t}{foreach $t as $tt}{if $v==$tt}class='i'{/if}{/foreach}{/foreach}{/if}></i></label>
    {/foreach}
     </td>
   </tr>
{/volist}
   <tr>
     <td class=''></td>
     <td class='' >
         <input type='button' class='tjbtn' value='生成数据' style='margin:5px 200px;' @click='list_add()'/>
     </td>
   </tr>
  
</table>
<script src='/js/jquery.js'></script>
<script src='/js/vue/vue.js'></script>
<script src='/js/layer.js'></script>
<script>

$(function(){
   window['check']=(self)=>{
    var i=0;
    window.arr=[];
     $('.rule_id').each(function(){
               if($(this).find('i').attr('class')=='i'){
                $(this).find('input[name=ruledata_id]').prop('checked',true);
                 window.arr[i]=$(this).find('input[name=ruledata_id]').val();
                 self.list.list=window.arr;
                 i++;
              }
          });
 }

	 $('.rule_id').click(function(){
	 	 if($(this).find('input[type=checkbox]').prop('checked')){
            $(this).css({'border':'1px solid #ff3300'});
            $(this).find('i').addClass('i');
	 	 }else{
	 	 	$(this).css({'border':'1px solid #eee'});
	 	 	$(this).find('i').removeClass('i');
	 	 }
	 });
});
   new Vue({
   	el:"#stand_list",
      data:{
        name:'123',
      	list:{
      	 list:[]
      	}
      },methods:{
      	list_add(){
      		layer.msg('正在生成...', {time: 20000,icon:16});
      		let self=this;
      		$.ajax({
                url:'/admin.php/sp/stand_list_save',
                dataType:'json',
                data:self.list,
                type:'post',
                success:function(res){
                	 if(res.status=='ok'){
                	 	 layer.msg('生成成功！', {time:1500,icon:1});
                	 }else{
                	 	layer.msg('生成失败！', {time:1500,icon:7});
                	 }

                	setTimeout(function(){
                      if(res.status=='ok'){
                      	 window.parent.getlist(res);
                      }
                      parent.layer.closeAll();
                	},1600);
                }
      		});
      	}
      },created(){
        let self=this;
        $(function(){
       
           window.check(self);
        });
          
          
      }
   });
</script>
<style>
.stand_name{
	width:20%;
    border: 1px #e8e8e8 solid;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    background:#efefef;
    text-align:center;
    color:#666;
}
.stand_list{
	border:1px solid #efefef;
}
.rule_id{
	min-width: 80px;
    padding: 2px 10px;
    border:1px;
}
.rule_id{
	border: 1px solid #eee;
    background: #fbfbfb;
    color: #999;
    display: block;
    float: left;
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    border-radius: 2px;
    position: relative;
    margin-left:10px;
}

   .i{
    background: url(/image/dg.png) no-repeat;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: block;
    width: 13px;
    height: 17px;
}
 .tjbtn {
    background: #FF5722;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    font-family: '微软雅黑';
    color: #fff;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}
</style>